<template>
	<view>
		<view class="header">
			<view class="name"> {{name}} </view>
			<view class="con">{{con}}</view>
		</view>
		<view class="content">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="title">{{i+1}}、{{item.questionTitle}}</view>
				<radio-group>
					<label class="uni-list-cell uni-list-cell-pd" v-for="(op, j) in item.optionItems" :key="j">
						<view class="option">
							<radio @click="ans.splice(i,1,j)" :checked="ans[i]==j" />{{op}}
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="footer">
			<view class="tip">
				<view v-for="(item, i) in list" :class="['ti', ans[i]==-1?'':'do']" :key="i">{{i+1}}</view>
			</view>
			<button type="primary"><text class="iconfont">&#xe612;</text>提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				con: '',
				list: [],
				ans: []
			}
		},
		methods: {
			
		},
		onLoad(option) {
			let data = uni.getStorageSync('questionnaire')
			if(data){
				data = JSON.parse(data)
				this.name = data.name
				this.con = data.con
				this.list = data.question
				this.ans = new Array(this.list.length).fill(-1)
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFAEE;
		background-image: linear-gradient(#FFFAEE, #ffe0c5);
		font-family: 'Courier New', Courier, monospace;
	}
	
	.header {
		padding: 20px 10px;
		margin: 0 10px;
		border-radius: 20px;
		color: #646464;
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
	}

	.header .name {
		font-size: 25px;
		/* text-align: center; */
	}

	.header .con {
		/* text-indent: 36px; */
		margin: 10px 0;
	}

	.content .item {
		margin: 10px 20px;
		padding: 10px;
		border: 1px dotted #C0C0C0;
		border-radius: 15px;
		background-color: #FFFFFF;
		box-shadow: 10px 10px 5px #888888;
	}

	.content .title {
		margin-bottom: 10px;
	}

	.content .option {
		border-bottom: 1px solid #dde5ed;
		border-radius: 5px;
		padding: 10rpx;
		margin-bottom: 10rpx;
	}

	.content .option radio {
		margin: 0 10px;
	}

	.footer {
		margin: 30px 20px 50px 20px;
	}

	.footer .tip {
		margin: 10px 0 20px 0;
	}

	.footer .tip .ti {
		display: inline-block;
		margin-left: 20px;
		margin-bottom: 20px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #DDDDDD;
		box-shadow: 2px 2px 1px #888888;
	}

	.footer .tip .do {
		background-color: #fecbad;
	}
	
	.iconfont{
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 10px;
	}
</style>